<!-- 我的投票 -->
<template>
	<view class="container">
		<view class="">
			<BsinTitle text="我参与的活动"></BsinTitle>
			<view class="claim_task" v-for="(item, index) in myTaskData" :key="index" @click="goToTaskDetail">
				<view class="claim_task_header">
					<view class="">
						{{item.taskName}}
					</view>
				</view>
				<view class="claim_task_body">
					<view class="left">
						<view class="description">
							{{ item.description }}
						</view>
						<view class="time">
							活动时间：2022-1-1
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tab切换
				tabsList: [{
						name: '我参与的',
					},
					{
						name: '我发起的',
					}
				],
				tabsIndex: 0, // 控制tab,
				myTaskData: [{
						taskName: '某某活动',
						status: 1,
						description: '投票描述',
						startTime: '2022-1-1',
						endTime: '2024-1-1',
						ccy: 'ccy'
					},
					{
						taskName: '投票2',
						status: 1,
						description: '投票描述',
						startTime: '2022-1-1',
						endTime: '2024-1-1',
						ccy: 'ccy'
					}
				]
			}
		},
		methods: {
			// tabs切换
			handleTopList({
				index
			}) {
				this.tabsIndex = index
			},

			// 任务详情
			goToTaskDetail() {
				uni.navigateTo({
					url: `/pages/Dao/TaskDetail?taskType=${3}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/* 确保没有高度的时候也会100% */
		min-height: 100vh;
		background-color: #F9F9F9;

		// 我认领的
		.claim_task {
			width: 90%;
			margin: 0 auto;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 20rpx;

			&_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 4rpx;
				background-color: #fff;
				padding: 30rpx;
			}

			&_body {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				background-color: #fff;

				.left {
					color: #777;

					.description {
						min-height: 100rpx;

					}
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.unit {
						color: #777;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
